<template>
  <div style="background: url(public/static/houtai/img/bg.jpg);background-size: cover" class="body">
    <div id="kv2jbf78">
      <form qw-c="form" action="#" method="post">
        <div class="form-group">
          <input maxlength="-1" class="form-control" placeholder="请输入用户名" name="username" qw-c="username" type="text">

        </div>

        <div class="form-group" qw-c="passwordcomponent">
          <input maxlength="-1" class="form-control" placeholder="请输入密码" name="password" type="password"
                 qw-c="password">
          <i class="fa fa-lock icon"></i>
        </div>
        <div class="form-group" qw-c="passwordcomponent"><input maxlength="-1" class="form-control" placeholder="请确认密码"
                                                                name="repassword" type="password" qw-c="password"> <i
          class="fa fa-lock icon"></i></div>


        <div class="form-group">
          <select class="form-control" qw-c="identity" name="identity">
            <option>家族</option>
          </select>
          <i class="fa fa-id-card icon"></i>
        </div>
        <div class="form-group">
          <button type="button" @click="registact" class="btn btn-primaryy" style="margin-left: 0;">注册</button>
        </div>
        <div qw-c="infotext" id="dmtext">
          已有账号，点击<a href="/#/Login">登录</a>
        </div>
      </form>
    </div>


  </div>
</template>
<script>
  // import Htmenu from "./Htmenu.vue";

  export default {
    // name: "Regist",
    name: 'RegistrationForm',
    // components: {Htmenu},

    data() {
      return {
        identity: "",
        userinfo: {},
      }
    },
    methods: {
      uploadfile(file, itemname, attr) {
        console.log(file)
        let _this = this;
        var forms = new FormData()
        var configs = {
          headers: {'Content-Type': 'multipart/form-data'}
        };
        forms.append('file', file.target.files[0])
        this.$axios.post("/addfilejson.action", forms, configs).then(res => {
          console.log(res);
          //$(".fileimg").attr("src","http://localhost:8080/jiapuzupu/resource/uploads/" + res.data);
          _this.$forceUpdate();
          _this[itemname][attr] = res.data;
        })
      },
      getNowTime() {
        return new Date(+new Date() + 8 * 3600 * 1000).toJSON().substr(0, 19).replace("T", " ");
      },
      serializeForm(formid) {
        var fields;
        if (formid) {
          fields = ('#' + formid).serializeArray();
        } else {
          fields = ("form").serializeArray();
        }
        // var obj = {}; //声明一个对象               ///////原来
        // $.each(fields, function (index, field) {
        //   obj[field.name] = field.value; //通过变量，将属性值，属性一起放到对象中
        // })
        // return obj;

        var obj = {}; // 声明一个对象

// 使用 for 循环
        for (var i = 0; i < fields.length; i++) {
          var field = fields[i];
          obj[field.name] = field.value; // 通过变量，将属性值和属性一起放到对象中
        }

        return obj; // 返回填充后的对象


      }, registact() {
        let _this = this;

        console.log(_this.serializeForm());
        this.$axios.post("/registactjson.action", _this.serializeForm())
          .then(res => {

            if (res.data == "请先登录") {
              this.$message({
                message: '请先登录',
                type: 'success'
              });
              _this.$router.push('/Login');
            }


            console.log(res.data);

            var obj = res.data;

            var message = obj['message'];

            if (message) {
              this.$message({
                message: message,
                type: 'success'
              });
            }

            if (message == "注册成功，请登录") {
              _this.$router.push('/Login');
            }

          })
          .catch(err => {
            console.log(err)
            this.$message({
              message: '注册失败',
              type: 'error'
            });
          })


      },
    },
    created() {

      let _this = this;
      _this.identity = window.sessionStorage.getItem("identity");
      _this.userinfo = JSON.parse(window.sessionStorage.getItem("userinfo"));

    },
    beforeCreate() {

      ("#cssdiv").html("");

      var cssstr = "<link rel=\"stylesheet\" href=\"/static/houtai/css/bootstrap.min.css\"> " +
        "<link href=\"https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css\" rel=\"stylesheet\"> "
      ;

      ("#cssdiv").html(cssstr);
      ("#jsdiv").html("");

    //   var jsstr = "<script src=\"/static/houtai/js/jquery.min.js\"><\/script> ";
    //   setTimeout(function () {
    //     ("#jsdiv").html(jsstr);
    //   }, 100);
    //
    // },

      var jsstr = "<script src=\"/static/houtai/js/jquery.min.js\"><\/script> ";
setTimeout(function () {
("#jsdiv").html(jsstr);
}, 100);

},


// mounted() {
    //   let _this = this;
    //
    //   setTimeout(function () {
    //
    //     // if ("") {改
    //     if ("") {
    //       alert("");
    //     }
    //
    //   }, 20)             gggg改
    // }
    mounted() {
      setTimeout(function () {
        if (this.someCondition) { // 这里使用 this.someCondition 而不是空字符串
          alert("");
        }
      }, 20);
    }
  }
</script>
<style>

  option {
    background: #9CBBDE !important;
  }

  #dmtext {
    text-align: right;
    color: white;
  }

  .form-group {
    position: relative;
  }

  .icon {
    color: white;
    position: absolute;
    left: 25px;
    top: 15px;
  }

  .form-control::placeholder {
    color: white !important;
  }

  .form-control {
    border-radius: 25px !important;
    height: 45px !important;
    line-height: 45px !important;
    background-color: rgba(255, 255, 255, 0.58) !important;
    color: white !important;
    padding: 0 50px !important;
  }

  .btn-primaryy {
    background: #3A62D7;
    width: 100%;
    height: 50px;
    border-color: #3A62D7;
    border-radius: 25px;
  }

  .form-group {
    margin-top: 10px;
  }

  #kv2jbf79 {
    font-size: 22px;
  }

  #kv2jbf78 {
    width: 400px;
    margin: auto;
    margin-top: 150px;
    min-height: 100px;
    border-radius: 5px;
    padding: 30px;
  }
</style>


